<template>
	<div>
		<!--  -->
		<div>
			<div class="titlt-my-xiangqin">
				<h3>求职意向</h3>
				<span @click="xiangQ">查看详情</span>
			</div>
			<titles>
				<span slot="icons">
					<van-icon name="underway-o" color="#fa0004" />
				</span>
				<span slot="my-tit">正在找工作中</span>
			</titles>
			<titles>
				<span slot="icons">
					<van-icon name="label-o" color="#fa0004" />
				</span>
				<span slot="my-tit">前端开发丨</span>
				<span slot="my-tit">软件工程师丨</span>
				<span slot="my-tit">网页设计制作</span>
			</titles>
		</div>
		<!-- 教育经历 -->
		<div>
			<div class="titlt-my-xiangqin">
				<h3>教育经历</h3>
				<span @click="edits">查看详情</span>
			</div>
			<titles>
				<span slot="icons">
					<van-icon name="medal-o" color="#fa0004"/>
				</span>
				<span slot="my-tit">西安高新科技职业学院</span>
			</titles>
			<div class="titlt-my-timers">
				<span>2018.09 - 2021.07</span>
				<span>大专丨统招丨智能控制技术</span>
			</div>
		</div>
		<!-- 项目实战 -->
		<div>
			<div class="titlt-my-xiangqin">
				<h3>项目实战</h3>
				<span @click="xiangmu">查看详情</span>
			</div>
			<!-- 项目实战 -->
			<titles v-for="(item,index) in list">
				<span slot="icons">
					<van-icon name="fire-o" color="#fa0004" />
				</span>
				<span slot="my-tit">
					<h3>{{item.uname}}</h3>
				</span>
			</titles>
		</div>
		
		<!-- 专业技能 -->
		<div>
			<div class="titlt-my-xiangqin">
				<h3>专业技能</h3>
				<!-- <span>查看详情</span> -->
			</div>
			<!-- 专业技能 -->
			<div v-for="(item,index) in zylist">
				<titles>
					<span slot="icons">
						<van-icon name="certificate" color="#5500ff" />
					</span>
					<span slot="my-tit" class="item-my-icon">
						<h3>{{item.uname}}</h3>
					</span>
				</titles>
				<span class="item-shuliandu">{{item.icone}}</span>
			</div>
			
		</div>
		
		<!-- 证书 -->
		<div>
			<div class="titlt-my-xiangqin">
				<h3>证书</h3>
				<span @click="zhengzhu">查看详情</span>
			</div>
			<titles>
				<span slot="icons">
					<van-icon name="description" color="#1dff42"/>
				</span>
				<span slot="my-tit">word初级优秀证书</span>
			</titles>
			<div class="titlt-my-timers">
				<span>2019-10-15</span>
			</div>
		</div>
		
		<!-- 自我评价 -->
		<div>
			<div class="titlt-my-xiangqin">
				<h3>自我评价</h3>
				<!-- <span>查看详情</span> -->
			</div>
			<titles>
				<span slot="my-tit">对互联网信息有极大的热情，热爱代码，喜欢钻研电子产品弄清其工作原理，还有丰富的计算机硬件理解以及软件的维护管理，系统的安装。平时喜欢听听音乐打打篮球等。</span>
			</titles>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import titles from './title.vue'
	export default {
		data() {
			return {
				list: [{
						"icone": "fire-o",
						"uname": "uni-app开发西高树洞小程序"
					},
					{
						"icone": "fire-o",
						"uname": "uni-app开发仿飞猪旅行小程序"
					},
					{
						"icone": "fire-o",
						"uname": "vue仿写哔哩哔哩移动端"
					},
					{
						"icone": "fire-o",
						"uname": "HbuilderX打包APP"
					},
					{
						"icone": "fire-o",
						"uname": "个人网站：wzs520.host3v.com"
					}
				],
				zylist: [{
						"icone": "2月丨精通",
						"uname": "HTML+CSS3、页面响应式布局"
					},
					{
						"icone": "5月丨熟练",
						"uname": "javaScript"
					},
					{
						"icone": "2月丨一般",
						"uname": "jQuery、ES6"
					},
					{
						"icone": "1月丨一般",
						"uname": "node.js基础"
					},
					{
						"icone": "4月丨精通",
						"uname": "uni-app微信小程序云开发"
					},
					{
						"icone": "2月丨熟练",
						"uname": "DOM/BOM操作"
					},
					{
						"icone": "1月丨精通",
						"uname": "Ui框架(bootstrap、elementUI、vant)"
					},
					{
						"icone": "1月丨熟练",
						"uname": "vuex状态管理器"
					},
					{
						"icone": "1月丨熟练",
						"uname": "前后端交互：Axios"
					},
					{
						"icone": "10月丨熟练",
						"uname": "日常办公 Office、git 以及 gitee使用"
					}
				]
			}
		},
		components: {
			titles
		},
		methods:{
			xiangQ(){
				this.$router.push('/qiuzhi')
			},
			edits(){
				this.$router.push('/edit')
			},
			xiangmu(){
				Toast({
				  message: '请前往作品中心查看',
				  icon: 'like-o',
				  overlay:"true",
				  closeOnClickOverlay:"true"
				});
			},
			zhengzhu(){
				this.$router.push('/zhengshu')
			}
		}
	}
</script>

<style scoped="scoped">
	.titlt-my-xiangqin {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.titlt-my-xiangqin span {
		color: #0570DB;
	}

	.titlt-my-timers {
		display: flex;
		flex-direction: column;
		padding: 10px 30px 10px 50px;
	}

	.titlt-my-timers span {
		padding-top: 5px;
	}
	.item-shuliandu{
		margin: 0 0 0 50px; 
	}
	
</style>
